<template>
  <div class="box">
    <el-form class="box-from" ref="login-verify" :rules="rules" :model="user">
      <el-form-item>
        <div class="from-head"></div>
      </el-form-item>
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code"></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="user.agree"
          >我已阅读并同意用户协议和隐私条款</el-checkbox
        >
      </el-form-item>
      <el-form-item>
        <el-button class="from-bun" type="primary" @click="Login"
          >登陆</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { apiLogin } from '@/api/user.js';
export default {
  name:'login',
  data() {
    return {
      user: {
        mobile: "18043644019",
        code: "wds",
        agree: false
      },
      rules: {
        mobile: [
          { required: true, message: "手机号不能为空", trigger: "change" },
          {
            pattern: /^1[3|5|7|8|7]\d{9}$/,
            message: "请输入正确的手机号格式",
            trigger: "blur"
          }
        ],
        code: [
          { required: true, message: "验证码不能为空", trigger: "change" },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "blur" }
        ],
        agree:[
          {
            validator:(rule,val,callback)=>{
              if(val){
                callback()
              }else{
                callback(new Error('请勾选用户协议'));
              }
            },
            trigger: 'change'
          }
        ]
      }
    };
  },
  methods: {
    Login() {
      this.$refs["login-verify"].validate(val =>{
        if(val){
          this.ajax()
        }else{
          return //val ===false 就return 代码不执行
        }
      })
    },
    ajax(){
      // request({  把这个请求封装到 api 文件夹下的 user.js文件中
      //   method:'POST',
      //   url:'/v1_0/authorizations',
      //   data:this.user
      // })
      apiLogin(this.user)
      .then((req)=>{
        console.log('登陆成功')
        //将接口返回的用户相关数据放到本地存储，方便应用数据共享
        //本地存储只能存储字符串
        //如果需要存储对象，数字类型的数据，则需要把他们转为JSON格式字符串进行存储
        //JSON.stringify() ==>把对象或者数字转换成JSON字符串
        window.localStorage.setItem('user',JSON.stringify(res.data.data))
        this.$router.push(
          {name:'home'} 
        )
      }).catch((err)=>{
         this.$router.push(
          {name:'home'} 
        )
         this.$message({
          showClose: true,
          message: '没有接口登陆不了😫😫,用路由实现的跳转',
          duration:1500,
          type: 'error'
        });
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../../assets/login-bg.jpg");
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .box-from {
    min-width: 300px;
    background-color: #fff;
    padding: 50px;
    border-radius: 9px;
    .from-head {
      width: 300px;
      height: 57px;
      background: url("../../assets/Log.png") no-repeat center;
    }
    .from-bun {
      width: 100%;
    }
  }
}
</style>
